<template>
  <div>
    <h2 style="text-align: center;">航班列表</h2>
    <el-row :gutter="20">       
     <el-col :span="24">
      <!-- 查询按钮 -->
       <div>
        <el-button @click="toSelectFlight" type="primary" size="small">查询航班</el-button>
        <el-button @click="toTransferFlight" type="primary" size="small">查询中转方案</el-button>
        <el-button type="text" icon="el-icon-refresh" :style="{ fontSize: '24px', padding: '10px' }" @click="refreshBtn"></el-button>
        <el-button type="text" :style="{ fontSize: '24px', padding: '10px' }" @click="timeExchangeBtn">{{ buttonText }}</el-button>
       </div>
      <el-table
    :data="flightList"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    >
    
    <el-table-column
      prop="flightNumber"
      label="航班号"
      width="100">
      
    </el-table-column>
    <el-table-column
      prop="airline"
      label="航空公司"
      width="120">
    
    </el-table-column>
    <el-table-column
      prop="departureCity"
      label="出发地"
      width="100">
    </el-table-column>
    <el-table-column
      prop="departureAirport"
      label="出发机场"
      width="140">
    </el-table-column>
    <el-table-column
      prop="arrivalCity"
      label="目的地"
      width="100">
    </el-table-column>
    <el-table-column
      prop="arrivalAirport"
      label="目的机场"
      width="140">
    </el-table-column>
    <el-table-column
      prop="departureTime"
      label="起飞时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="arrivalTime"
      label="到达时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="status"
      label="航班状态"
      width="100">
    </el-table-column>
    <el-table-column
    label="操作"
    width="140"
    fixed="right">
    <template v-slot="props">
      <el-button type="text" @click="Toticket(props.row.flightId)">查看机票</el-button>
    </template>
    </el-table-column>
  </el-table>
 <el-row style="margin-top: 10px;text-align: center;" >
  <el-pagination
background
layout="prev, pager, next"
:total="total"
:page-size="pageSize"
prev-text="上一页"
next-text="下一页"
@next-click="getFlightPage(pageNo+1,pageSize)"
@prev-click="getFlightPage(pageNo-1,pageSize)"
@current-change="handleCurrentChange"
v-if="isPaginationVisable1">
</el-pagination>
 </el-row>
     </el-col>
    </el-row>
     
    <!-- 查询航班Dialog -->
    <el-dialog title="查询航班信息" :visible.sync="dialogTableVisibleSelect" width="%40" @close="resetForm('flightForm')">
      <el-form :model="flight"  ref="flightForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="航班号" prop="flightNumber">
  <el-input v-model="flight.flightNumber" placeholder="请输入航班号"></el-input>
</el-form-item>
<el-form-item label="航空公司" prop="airline">
  <el-input v-model="flight.airline" placeholder="请输入航空公司"></el-input>
</el-form-item>
<el-form-item label="出发地" prop="departureCity">
  <el-input v-model="flight.departureCity" placeholder="请输入出发城市名"></el-input>
</el-form-item>
<el-form-item label="出发机场" prop="departureAirport">
  <el-input v-model="flight.departureAirport" placeholder="请输入出发机场名"></el-input>
</el-form-item>
<el-form-item label="目的地" prop="arrivalCity">
  <el-input v-model="flight.arrivalCity" placeholder="请输入目的城市名"></el-input>
</el-form-item>
<el-form-item label="目的机场" prop="arrivalAirport">
  <el-input v-model="flight.arrivalAirport" placeholder="请输入目的机场名"></el-input>
</el-form-item>
<el-form-item label="航班状态" prop="status">
  <el-select v-model="flight.status" placeholder="请选择航班状态">
    <el-option label="计划" value="计划"></el-option>
    <el-option label="延误" value="延误"></el-option>
    <el-option label="取消" value="取消"></el-option>
    <el-option label="到达" value="到达"></el-option>
    <el-option label="起飞" value="起飞"></el-option>
    <el-option label="到达" value="到达"></el-option>
  </el-select>
</el-form-item>
<el-form-item label="起飞时间" prop="departureTime">
  <el-date-picker
    v-model="flight.departureTime"
    type="datetime"
    value-format="yyyy-MM-dd HH:mm:ss"
    :picker-options="pickerOptions"
    placeholder="选择日期时间">
  </el-date-picker>
</el-form-item>
<el-form-item label="到达时间" prop="arrivalTime">
  <el-date-picker
    v-model="flight.arrivalTime"
    value-format="yyyy-MM-dd HH:mm:ss"
    type="datetime"
    :picker-options="pickerOptions"
    placeholder="选择日期时间">
  </el-date-picker>
</el-form-item>
<el-form-item>
  <el-button type="primary" @click=" selectFlightBtn('flightForm')">查询</el-button>
  <el-button @click="resetForm('flightForm')">重置</el-button>
</el-form-item>
</el-form>
    </el-dialog>
    <!-- 查看机票Drawer -->
    <el-drawer
title="当前航班机票列表"
:visible.sync="ticketDrawer"
direction="rtl"
size="50%">
 <el-table :data="ticketList">
    <el-table-column property="type" label="类型" width="150"></el-table-column>
    <el-table-column property="count" label="剩余数量" width="150"></el-table-column>
    <el-table-column property="price" label="价格" width="150"></el-table-column>
    <el-table-column
      label="操作"
      width="140"
      fixed="right">  
        <template v-slot="props">
        <el-button type="success" @click="toSelectPassenger(props.row)">购买机票</el-button>
      </template>
      </el-table-column>
  </el-table>
</el-drawer>
 <!-- 选择乘机人Dialog -->
 <el-dialog title="选择乘机人" :visible.sync="dialogVisibleSelectPassenger">
  <el-form :model="passenger" ref="passengerForm">
    <el-form-item label="乘机人" prop="passengerId">
      <el-select  placeholder="请选择乘机人" v-model="passenger.passengerId"  >
        <el-option v-for="passenger in passengerList" :key="passenger.passengerId"  :label="`${passenger.passengerName} (${passenger.passengerNumber})`" :value="passenger.passengerId" size="medium"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleSelectPassenger = false">取 消</el-button>
    <el-button type="primary" @click="buyTicket('passengerForm')">确 定</el-button>
  </div>
</el-dialog>
<!-- 查询中转航班Dialog -->
<el-dialog title="查询中转航班" :visible.sync="dialogVisibleTransferFlight">
  <el-form :model="transferFlight" ref="transfer">
    <el-form-item label="出发城市">
      <el-input  autocomplete="off" v-model="transferFlight.flight1DepartureCity"></el-input>
    </el-form-item>
    <el-form-item label="目的城市">
      <el-input  autocomplete="off" v-model="transferFlight.flight2ArrivalCity"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleTransferFlight = false">取 消</el-button>
    <el-button type="primary" @click="selectTransferFlight('transfer')">查 询</el-button>
  </div>
</el-dialog>
<!-- 中转航班结果显示Dialog -->
<el-dialog title="查询中转航班" :visible.sync="dialogVisibleTransferFlightShow">
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>中转方案</span>
      
    </div>
    <div v-for="(flight, index) in transferFlightList" :key="index" class="text item">
      <span><strong>方案{{index+1}}</strong></span><br>
      <el-button type="text" style="float: right; padding: 3px 0" @click="getTransferTicket(flight.flight1Id,flight.flight2Id)">购买</el-button>
      <span>航班 1</span><br>
      航班编号: {{ flight.flight1Number }}<br>
      出发城市: {{ flight.flight1DepartureCity }}<br>
      到达城市: {{ flight.flight1ArrivalCity }}<br>
      出发机场: {{ flight.flight1DepartureAirport }}<br>
      到达机场: {{ flight.flight1ArrivalAirport }}<br>
      出发时间: {{ flight.flight1DepartureTime }}<br>
      到达时间: {{ flight.flight1ArrivalTime }}<br>
      <span>航班 2</span><br>
      航班编号: {{ flight.flight2Number }} <br>
      出发城市: {{ flight.flight2DepartureCity }}<br>
      到达城市: {{ flight.flight2ArrivalCity }} <br>
      出发机场: {{ flight.flight2DepartureAirport }}<br>
      到达机场: {{ flight.flight2ArrivalAirport }}<br>
      出发时间: {{ flight.flight2DepartureTime }}<br>
      到达时间: {{ flight.flight2ArrivalTime }}<br>
    </div>
  </el-card>
</el-dialog>
 <!-- 查看中转机票Drawer -->
 <el-drawer
title="中转航班机票列表"
:visible.sync="transferDrawer"
direction="rtl"
size="50%">
 <el-table :data="transferTicket1">
    <el-table-column property="type" label="类型" width="150"></el-table-column>
    <el-table-column property="count" label="剩余数量" width="150"></el-table-column>
    <el-table-column property="price" label="价格" width="150"></el-table-column>
    <el-table-column
      label="操作"
      width="140"
      fixed="right">  
        <template v-slot="props">
        <el-button type="success" @click="toSelectTransferPassenger(props.row,'firstTable')">购买机票</el-button>
      </template>
      </el-table-column>
  </el-table>
  <el-table :data="transferTicket2">
    <el-table-column property="type" label="类型" width="150"></el-table-column>
    <el-table-column property="count" label="剩余数量" width="150"></el-table-column>
    <el-table-column property="price" label="价格" width="150"></el-table-column>
    <el-table-column
      label="操作"
      width="140"
      fixed="right">  
        <template v-slot="props">
        <el-button type="success" @click="toSelectTransferPassenger(props.row,'secondTable')">购买机票</el-button>
      </template>
      </el-table-column>
  </el-table>
</el-drawer>
<!-- 选择中转乘机人Dialog -->
<el-dialog title="选择乘机人" :visible.sync="dialogVisibleSelectTransferPassenger">
  <el-form :model="passenger" ref="passengerForm">
    <el-form-item label="乘机人" prop="passengerId">
      <el-select  placeholder="请选择乘机人" v-model="passenger.passengerId"  >
        <el-option v-for="passenger in passengerList" :key="passenger.passengerId"  :label="`${passenger.passengerName} (${passenger.passengerNumber})`" :value="passenger.passengerId" size="medium"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleSelectPassenger = false">取 消</el-button>
    <el-button type="primary" @click=" buyTransferticket('passengerForm')">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>
<script>
import axios from 'axios';
import { mapGetters } from 'vuex';
  export default {
    computed: {
    ...mapGetters([
      'name',
      'userId'
    ]),
    buttonText() {
      return this.showLocalTime ? '显示当地时间' : '显示北京时间';
    }
    },
    created() {
    // 在组件创建时，将 userId 的值赋给 data 中的 localUserId
    this.localUserId = this.userId
  },
    data() {
      return {
        pickerOptions: {
        disabledDate(time) {
          // 只能选择今天之后的时间
          const today = new Date();
          today.setHours(0, 0, 0, 0); // 设置到今天的开始时间（00:00:00）
          return time.getTime() < today.getTime();
        }
      },
        showLocalTime: true,
        tableType: '', 
        transferTicket1:[],
        transferTicket2:[],
        transferFlightList:[],
        transferFlight:{
          flight1Id:'',
          flight1Number:'',
          flight1DepartureCity:'',
          flight1ArrivalCity:'',
          flight1DepartureAirport:'',
          flight1ArrivalAirport:'',
          flight1DepartureTime:'',
          flight1ArrivalTime:'',
          flight2Id:'',
          flight2Number:'',
          flight2DepartureCity:'',
          flight2ArrivalCity:'',
          flight2DepartureAirport:'',
          flight2ArrivalAirport:'',
          flight2DepartureTime:'',
          flight2ArrivalTime:'',
        },
        passenger:{
            passengerId:undefined,
            passengerName:'',
            passengerPhone:'',
            passengerNumber:'',
          },
        localUserId:'',
        ticketList:[],
        flightList:[],
        passengerList:[],
        pageNo:1,
        pageSize:8,
        total:0,
        flightIds:[],
        dialogVisibleSelectTransferPassenger:false,
        transferDrawer:false,
        dialogVisibleTransferFlightShow:false,
        dialogVisibleSelectPassenger:false,
        dialogTableVisible:false,
        dialogTableVisibleSelect:false,
        dialogTableVisibleAddTicket:false,
        dialogTableVisibleUpdateTicket:false,
        dialogTableVisibleAddTicket1:false,
        isPaginationVisable1:true,
        ticketDrawer:false,
        dialogVisibleTransferFlight:false,
        flight:{
          flightId:undefined,
          flightNumber:'',
          airline:'',
          departureCity:'',
          arrivalCity:'',
          departureAirport:'',
          arrivalAirport:'',
          status:'',
          departureTime:'',
          arrivalTime:'',
        },
        flight1:{
          flightId:undefined,
          flightNumber:'',
          airline:'',
          departureCity:'',
          arrivalCity:'',
          departureAirport:'',
          arrivalAirport:'',
          status:'',
          departureTime:'',
          arrivalTime:'',
        },
        ticket:{
          ticketId:undefined,
          flightId:undefined,
          price:'',
          type:'',
          count:'',
        }, 
        order:{
          orderId:undefined,
          passengerId:undefined,
          flightId:undefined,
          ticketId:undefined,
          userId:undefined,
          bookingTime:'',
          status:''
        }  
      }
    },
    mounted(){
      this.getFlightPage(this.pageNo,this.pageSize);
      this.getPassenger()
    },
    methods:{
      /**
       * 时间转换按钮
       */
      timeExchangeBtn(){
        if(this.showLocalTime===false){
          this.getFlightPage(this.pageNo,this.pageSize)
        }
        else if(this.showLocalTime===true){
          this.getLocalTime(this.pageNo,this.pageSize)
        }
      },
      /**
       * 显示当地时间
       */
       getLocalTime(pageNo,pageSize){
        this.showLocalTime=false
        this.pageNo=pageNo
        this.pageSize=pageSize
        console.log(pageNo)
        console.log(pageSize)
        axios.get("http://localhost:8082/timezone/getFlightsWithLocalTime",{
          params:{
            pageNo:this.pageNo,
            pageSize:this.pageSize
          }
        }).then(resp=>{
          console.log("------->",resp)
          this.flightList=resp.data.data.page
          this.total=resp.data.data.total
        })
       },
      /**
       * 查询中转航班机票信息
       */
       getTransferTicket(flightId1,flightId2){
        this.flight.flightId=flightId1,
        this.flight1.flightId=flightId2,
        this.transferDrawer=true;
        console.log(flightId1)
        axios.get("http://localhost:8082/ticket/selectTicketByFlightId",{
          params:{
            flightId:flightId1
          }
        }).then(resp=>{
          console.log("------->",resp)
          this.transferTicket1=resp.data.data
          this.flight.flightId=flightId1
          console.log("1111111111========",flightId1)
          this.getTransferTicket2(flightId2)
        })
       },
       getTransferTicket2(flightId2){
        axios.get("http://localhost:8082/ticket/selectTicketByFlightId",{
          params:{
            flightId:flightId2
          }
        }).then(resp=>{
          console.log("44444444444========",flightId2)
          console.log("------->",resp)
          this.transferTicket2=resp.data.data
        })
       },
      /**
       * 购买中转航班
       */
      buyTransferticket(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log("this.flight.flightId",this.flight.flightId)
            console.log("this.flight1.flightId",this.flight1.flightId)
            if(this.tableType ==='firstTable'){
            this.order.flightId=this.flight.flightId}
            else if (this.tableType === 'secondTable'){
            this.order.flightId=this.flight1.flightId
            }
            console.log("this.order.flightId",this.order.flightId)
            this.order.ticketId=this.ticket.ticketId,
            this.order.status='已支付',
            this.order.passengerId=this.passenger.passengerId,
            this.order.userId=this.localUserId
            console.log('2937946',this.order)
            axios.post("http://localhost:8082/order/addOrder",JSON.stringify(this.order),{
              headers:{
              'Content-Type':'application/json'
            }
            }).then(resp=>{
              console.log(resp)
              if(resp.data.code===0){
                //关闭对话框
                this.dialogVisibleSelectTransferPassenger=false
                
                this.$message.success("购买成功")
                //获取分页数据
                console.log("中转航班",this.order.flightId)
                this.Toticket(this.order.flightId)
                
              }else{
                this.$message.error(resp.data.message)            
              }
            }
            )
          } else {
            this.$message.error("购买失败")
            return false;
          }
        });
      },
      /**
       * 查询中转航班
       */
       selectTransferFlight(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.get("http://localhost:8082/flight/getTransferFlight",{
              params:{
                departureCity:this.transferFlight.flight1DepartureCity,
                arrivalCity:this.transferFlight.flight2ArrivalCity
              }
            }
            ).then(resp=>{
              console.log(resp)
              if(resp.data.code===0){
                //关闭对话框
                this.dialogVisibleTransferFlight=false
                this.$message.success("查询成功")
                //获取数据
                this.dialogVisibleTransferFlightShow=true
                this.transferFlightList=resp.data.data
                console.log("qqqqqqqqqq",this.transferFlightList)
              }else{
                this.$message.error(resp.data.message)            
              }
            }
            )
          } else {
            this.$message.error("查询失败")
            return false;
          }
        });
       },
      /**
       * 打开查询中转航班Dialog
       */
       toTransferFlight(){
          this.dialogVisibleTransferFlight=true
       },
       /**
        * 打开中转航班选择乘客对话框
        */
        toSelectTransferPassenger(row,tableType){
          this.ticket.ticketId=row.ticketId,
          this.tableType=tableType
          this.dialogVisibleSelectTransferPassenger=true
        },
      /**
       * 购买机票按钮
       */
      buyTicket(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.order.flightId=this.flight.flightId,
            console.log("13214324342",this.order.flightId)
            this.order.ticketId=this.ticket.ticketId,
            this.order.status='已支付',
            this.order.passengerId=this.passenger.passengerId,
            this.order.userId=this.localUserId
            console.log('2937946',this.order)
            axios.post("http://localhost:8082/order/addOrder",JSON.stringify(this.order),{
              headers:{
              'Content-Type':'application/json'
            }
            }).then(resp=>{
              console.log(resp)
              if(resp.data.code===0){
                //关闭对话框
                this.dialogVisibleSelectPassenger=false
                this.$message.success("购买成功")
                //获取分页数据
                console.log("this.flight.orderId",this.order.flightId)
                this.Toticket(this.order.flightId)
              }else{
                this.$message.error(resp.data.message)            
              }
            }
            )
          } else {
            this.$message.error("购买失败")
            return false;
          }
        });
      },
      /**
       * 获取乘客列表
       */
      getPassenger(){
        axios.get("http://localhost:8082/userPassenger/getPassengerList",{
          params:{
            userId:this.localUserId
          }
        }
        ).then(resp=>{
          console.log("999999----------=======",resp)
          this.passengerList=resp.data.data
        })
      },
      /**
       * 显示选择乘机人Dialog
       */
       toSelectPassenger(row){
          this.ticket.ticketId=row.ticketId
          this.dialogVisibleSelectPassenger=true
       },
      /**
       * 查看机票按钮
       */
      Toticket(flightId){
        this.flight.flightId=flightId,
        console.log("2222222222========",this.flight.flightId)
        if(this.transferDrawer===false){
          this.ticketDrawer=true;
        }
        console.log(flightId)
        axios.get("http://localhost:8082/ticket/selectTicketByFlightId",{
          params:{
            flightId:flightId
          }
        }).then(resp=>{
          console.log("------->",resp)
          this.ticketList=resp.data.data
          console.log("1111111111========",flightId)
          this.flight.flightId=flightId
        })
      },
      /**
       * 刷新按钮事件
       */
       refreshBtn(){
        this.getFlightPage(this.pageNo,this.pageSize);
        this.isPaginationVisable1=true
       },
      /**
       * 多选事件处理
       */
      handleSelectionChange(val){
        this.flightIds=[],
        val.forEach(element => {
          this.flightIds.push(element.flightId)
        });
        
      },
      
      /**
       * 处理当前页
       */
      handleCurrentChange(current){
        this.pageNo=current
        this.getFlightPage(this.pageNo,this.pageSize)
      },
      /**
       * 分页获取航班信息的函数
       */
      getFlightPage(pageNo,pageSize){
        this.showLocalTime=true
        this.pageNo=pageNo
        this.pageSize=pageSize
        console.log(pageNo)
        console.log(pageSize)
        axios.get("http://localhost:8082/flight/getFlightsPage",{
          params:{
            pageNo:this.pageNo,
            pageSize:this.pageSize
          }
        }).then(resp=>{
          console.log("------->",resp)
          this.flightList=resp.data.data.page
          this.total=resp.data.data.total
        })
      },
      
      
      /**
       * 表单重置
       */
       resetForm(flightForm){
        //只能重置成flight对象的数据
        this.$refs[flightForm].resetFields();
        this.flight=this.$options.data().flight
       },
      
       /**
        * 查询按钮
        */
        selectFlightBtn() {
          console.log('Current flight:', this.flight);
          axios.get("http://localhost:8082/flight/getFlightsPage", {
          params: {
            pageNo: this.pageNo,
            pageSize:1000,
            flightNumber: this.flight.flightNumber,
            airline: this.flight.airline,
            departureAirport: this.flight.departureAirport,
            arrivalAirport: this.flight.arrivalAirport, 
            departureCity: this.flight.departureCity,
            arrivalCity: this.flight.arrivalCity,
            start: this.flight.departureTime, 
            end: this.flight.arrivalTime, 
            status: this.flight.status
          }
        }).then(resp => {
          if(resp.data.code===0){
              //关闭对话框
              this.dialogTableVisibleSelect=false
              this.isPaginationVisable1=false
              this.flightList = resp.data.data.page;
              this.total = resp.data.data.total;
            }else{
              this.$message.error(resp.data.data.message)}
              this.flightList = resp.data.data.page;
              this.total = resp.data.data.total;
        });
      },

       /**
        * 查询显示页面
        */
       toSelectFlight(){
        this.dialogTableVisibleSelect=true
       },
    }
  }
  
</script>
<style>


</style>